<template>
  <BasicModal
    @ok="handleOk"
    @cancel="handleCancel"
    @close="handleCancel"
    v-bind="$attrs"
    @register="registerModal"
    title="驳回理由"
    width="500px">
    <a-spin :spinning="confirmLoading">
      <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-row>
          <a-col :span="24">
            <a-form-item>
              <a-textarea v-model:value="formData.rejectReason" placeholder="请输入驳回理由" :rows="5" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </BasicModal>
</template>
<script lang="ts" setup>
import { defineExpose, reactive, ref } from "vue";
import { BasicModal, useModalInner } from "/@/components/Modal";
import { useForm } from "/@/components/Form/index";
import { useMessage } from "/@/hooks/web/useMessage";

// 声明Emits
  const emit = defineEmits(["success","cancel"]);
  const $message = useMessage();
  const formRef = ref();
  const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 4 } });
  const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 24 } });
  const confirmLoading = ref<boolean>(false);
  const formData = reactive({
    id: '',
    status: undefined,
    rejectReason: "",
  });

  //表单配置
  const [registerForm, { resetFields, validate, clearValidate }] = useForm();
  //表单赋值
  const [registerModal, { setModalProps, closeModal }] = useModalInner();

  /**
   * 打开弹窗事件
   * @param id
   * @param status
   */
  async function show(id,status) {
    formData.id = id;
    formData.status = status;
    await setModalProps({ visible: true });
  }

  async function handleOk() {
    if (!formData.rejectReason) {
      $message.createMessage.warning("请输入驳回理由!");
      return;
    }
    closeModal();
    emit("success",formData);
  }

  function handleCancel(){
    emit("cancel",formData);
  }

  defineExpose({
    show
  });
</script>
